<template>
    <div class="forgot-page">
        <div class="modal">
            <div class="modal-title">忘记密码</div>

            <div class="form-item">
                <el-input
                    size="large"
                    type="text"
                    v-model="phone"
                    placeholder="请输入您的手机号"
                    maxlength="11"
                ></el-input>
            </div>

            <div class="form-item">
                <el-input
                    size="large"
                    type="text"
                    v-model="code"
                    placeholder="请输入验证码"
                    maxlength="6"
                >
                    <template #append>
                        <el-button @click="onSendCode">{{
                            codeText
                        }}</el-button>
                    </template>
                </el-input>
            </div>
            <div class="form-item">
                <el-input
                    size="large"
                    type="password"
                    v-model="password"
                    placeholder="请输入新密码"
                    maxlength="16"
                ></el-input>
            </div>
            <div class="form-item">
                <el-input
                    size="large"
                    type="password"
                    v-model="againPassword"
                    placeholder="请确认新密码"
                    maxlength="16"
                ></el-input>
            </div>
            <div class="form-button">
                <button class="btn" @click="onSubmit">修改</button>
            </div>
            <div class="form-bottom">
                <span class="text-btn to-login" @click="onToLogin">去登录</span>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useContent } from ".";
const {
    phone,
    code,
    password,
    againPassword,
    codeText,

    onSendCode,
    onToLogin,
    onSubmit,
} = useContent();
</script>
<style lang="scss" scoped>
.forgot-page {
    position: relative;
    height: calc(100vh - 70px);
    width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    .modal {
        position: absolute;
        left: 50%;
        top: 40%;
        transform: translate(-50%, -50%);
        width: 350px;
        padding: 20px 20px 40px 20px;
        box-shadow: 0px 0px 20px rgb(71, 65, 87, 0.3);
        border-radius: 10px;
        background-color: #fff;
        box-sizing: border-box;

        &-title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 40px;
        }

        .form-item {
            margin-bottom: 20px;
        }

        .form-bottom {
            display: flex;
            margin-top: 10px;

            .text-btn {
                display: inline-block;
                color: #5185fb;
                font-size: 14px;
                cursor: pointer;
                user-select: none;

                &.to-login {
                    margin-left: auto;
                }
            }
        }

        .btn {
            width: 100%;
            outline: none;
            border: none;
            background-color: #5185fb;
            color: #fff;
            font-size: 18px;
            height: 40px;
            border-radius: 4px;
            cursor: pointer;
        }
    }
}
</style>
